<template lang="pug">
div.attention
  div.attention-top
    span.left
      span.My-attention(:class="{'checked':checkMy}" @click="checkMy=true,checkPE=false") 我的关注
      span.PE-title(:class="{'checked':checkPE}" @click="checkMy=false,checkPE=true") 体育
    span.right
      span.set-icon
  div.content
    //关注导航
    div.nav(v-show="checkMy")
      // 选择导航
      div.My-nav
        span.arrow
        span 我的导航
        span (0)
      // 自定义模块
      div.custom
        span.add-icon
        span 自定义
    //体育板块
    div.PE(v-show="checkPE")
      //轮播图
      carousel
      //赛程
      schedule
  //更多
  div.more-arrow(v-show="!checkMy")
    div.more-left
    div.more-left.more-right
    div.more-icon
      div.more-arrow-left
      div.more-arrow-left.more-arrow-right
</template>

<script>
import Carousel from './carousel'
import Schedule from './schedule'
export default {
  name: 'attention',
  components: {Schedule, Carousel},
  data () {
    return {
      checkMy: true,
      checkPE: false
    }
  },
  methods: {
  }
}
</script>

<style scoped lang="stylus">
.attention
  position relative
  border 1px solid #ddd
  text-align center
  margin-top 50px
  width 900px
  display inline-block
  .attention-top
    border-bottom 1px solid #ddd
    height: 40px
    display: flex
    justify-content space-between
    .checked
      background-color: #9a9da2
      color: #fff;
      font-weight: bold;
    .left
      span
        display: inline-block
        height: 40px
        line-height 40px
      .My-attention
        width 130px
        cursor pointer
        &:hover
          background-color #bbb
          color white
          font-weight: bold;
      .PE-title
        width 80px
        cursor pointer
        &:hover
          background-color #bbb
          color white
          font-weight: bold;
    .right
      display flex
      align-items center
      .set-icon
        display: inline-block
        background url("../../../../static/img/login/set.png")
        background-size contain
        width:18px
        height:18px
        margin-right 20px
        cursor pointer
        &:hover
          background url("../../../../static/img/login/set2.png")
          background-size contain
  .content
    text-align left
    margin 0 24px
    .nav
      .My-nav
        margin 10px 0
        border-bottom 1px solid #ddd
        padding-bottom 6px
        span
          display: inline-block
          margin-right 6px
          &:nth-child(2)
            font-weight bold
            font-size 14px
        .arrow
          height 0
          line-height 0
          width: 0
          border 5px solid transparent
          border-left-color #666
      .custom
        margin 10px 0
        .add-icon
          background url("../../../../static/img/login/add-icon.png") no-repeat
          background-size contain
          width 13px
          height 13px
          display: inline-block
          vertical-align middle
          margin-right 6px
    .PE
      margin-top 25PX
      display flex
      justify-content space-between
  .more-arrow
    position absolute
    display: inline-block
    bottom 0
    height 32px
    .more-left
      display inline-block
      width 30px
      height 32px
      background-color rgba(0,0,0,0.7)
      border-radius 100% 0 0 0
    .more-right
      border-radius 0 100% 0 0
    .more-icon
      position absolute
      width 22px
      height 13px
      top 5px
      left 0
      right 0
      margin 0 auto
      animation more-move 2s infinite
      @keyframes more-move
        0%
          top 2px
        50%
          top:10px
        100%
          top:2px
    .more-arrow-left
      display inline-block
      width 11px
      height 2px
      background-color white
      transform rotate(30deg)
    .more-arrow-right
      position relative
      left: -2px
      transform rotate(-30deg)
</style>
